<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jQuery表格搜索过滤和单元格高亮插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" href="css/samples-styles.css">
	<style type="text/css">
		td.alt {
			background-color: #ffc;
			background-color: rgba(230, 127, 34, 0.2);
		}
	</style>
</head>

<body>
	<div class="htmleaf-container">
		<div class="htmleaf-content">
			<div class="input-group">
				<div class="input-group-addon">过滤条件</div>
				<input class="form-control" type="search" id="input-filter" size="15" placeholder="输入过滤条件"></input>
			</div>
			<br>
			<table>
				<thead>
					<tr>
						<th scope="col" title="President Number">#</th>
						<th scope="col">President</th>
						<th scope="col">Terms</th>
						<th scope="col">Tenure</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>George Washington</td>
						<td>two</td>
						<td>1789-1797</td>
					</tr>
					<tr>
						<td>2</td>
						<td>John Adams</td>
						<td>one</td>
						<td>1797-1801</td>
					</tr>
					<tr>
						<td>3</td>
						<td>Thomas Jefferson</td>
						<td>two</td>
						<td>1801-1809</td>
					</tr>
					<tr>
						<td>4</td>
						<td>James Madison</td>
						<td>two</td>
						<td>1809-1817</td>
					</tr>
					<tr>
						<td>5</td>
						<td>James Monroe</td>
						<td>two</td>
						<td>1817-1825</td>
					</tr>
					<tr>
						<td>6</td>
						<td>John Quincy Adams</td>
						<td>one</td>
						<td>1825-1829</td>
					</tr>
					<tr>
						<td>7</td>
						<td>Andrew Jackson</td>
						<td>two</td>
						<td>1829-1837</td>
					</tr>
					<tr>
						<td>8</td>
						<td>Martin Van Buren</td>
						<td>one</td>
						<td>1837-1841</td>
					</tr>
					<tr>
						<td>9</td>
						<td>William Henry Harrison</td>
						<td>one-partial</td>
						<td>1841</td>
					</tr>
					<tr>
						<td>10</td>
						<td>John Tyler</td>
						<td>one-partial</td>
						<td>1841-1845</td>
					</tr>
				</tbody>
			</table>

		</div>

	</div>

	<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
	<!--<script>
		window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')
	</script>-->
	<script src="js/jquery.filtertable.min.js"></script>
	<script>
		$(document).ready(function () {
			$('table').filterTable({ // apply filterTable to all tables on this page
				inputSelector: '#input-filter' // use the existing input instead of creating a new one
			});
		});
	</script>
</body>

</html>